<template>
  <el-aside width="220px" class="custom-aside">
    <!-- 顶部logo和标题 -->
    <div class="header-section">
      <div class="logo-container">
        <img src="../assets/生成招生系统 Logo (1).png" class="logo-img" alt="Logo">
        <span class="school-name">母校行活动</span>
      </div>
    </div>

    <!-- 菜单部分 -->
    <el-menu
        active-text-color="#00ffff"
        background-color="#232323"
        text-color="#fff"
        router
        :default-active="activeMenu"
    >
      <el-menu-item
          :index="item.path"
          v-for="item in menuList"
          :key="item.path"
      >
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>

    <!-- 底部管理员标题 -->
    <div class="footer-section">
      <div class="admin-title">招办管理员</div>
    </div>
  </el-aside>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const menuList = [
  {
    path: "/manage/Teammanage",
    name: "TeamManage",
    label: "队伍管理",
    icon: "Promotion",
  },
  {
    path: "/review/Summarize",
    name: "Summarize",
    label: "总结审核",
    icon: "UserFilled",
  },
  {
    path: "/views/review/team",
    name: "team",
    label: "队伍审核",
    icon: "House",
  },
  {
    path: "/views/material/upload",
    name: "upload",
    label: "上传材料情况",
    icon: "House",
  },
  {
    path: "/action/activity",
    name: "activity",
    label: "活动批次",
    icon: "House",
  },
]

const route = useRoute()
const activeMenu = computed(() => {
  const { meta, path } = route
  return meta.activeMenu || path
})
</script>

<style scoped lang="scss">
.custom-aside {
  background-color: #232323;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;

  .header-section {
    padding: 20px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;

      .logo-img {
        width: 40px;
        height: 40px;
      }

      .school-name {
        color: white;
        font-size: 20px;
        font-weight: bold;
        white-space: nowrap;
      }
    }
  }

  .el-menu {
    border-right: none;
    flex: 1;
    margin-top: 10px;

    .icons {
      margin-right: 8px;
      width: 18px;
      height: 18px;
    }
  }

  .footer-section {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    .admin-title {
      color: white;
      font-size: 18px;
      font-weight: 500;
      width: 100%;
    }
  }
}
</style>